<template>
  <!-- vue2.0 需要根元素 vue3.0 可以是代码片段Fragment -->
  <div>
    App
    <!-- 1. 使用根模块的数据 -->
    <p>{{ $store.state.username }}</p>
    <!-- 2. 使用根模块的getters -->
    <p>{{ $store.getters["newName"] }}</p>
    <button @click="mutationsFn">修改</button>
  </div>
  <!-- <p>1</p> -->
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    // 1. 使用根模块的数据
    // 使用vuex仓库
    const store = useStore()
    console.log(store.state.username)
    // 2.使用根模块的getters
    console.log(store.getters.newName)
    // 3. 提交根模块mutations方法
    const mutationsFn = () => {
      // store.commit('updateName')
      store.dispatch('updateName')
    }
    // 4. 调用根模块actions函数

    return { mutationsFn }
  }
}
</script>
<style  scoped lang="less">
</style>
